﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>人才登记管理</title>
    <link href="~/layui/css/layui.css" rel="stylesheet">
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <style>
        body {
            background-color: #f2f2f2;
            padding: 15px;
        }
        .layui-form-label {
            width: 100px;
        }
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
        .layui-card {
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
        }
        .layui-card-header {
            font-size: 16px;
            font-weight: bold;
            position: relative;
        }
        .search-form {
            padding: 15px 0;
        }
        .search-form .layui-inline {
            margin-right: 10px;
        }
        .layui-btn-primary {
            border-color: #ddd;
        }
        .layui-table-tool {
            padding-top: 8px;
            padding-bottom: 8px;
        }
        .layui-table-page {
            text-align: right;
        }
        .layui-badge {
            padding: 4px 8px;
        }
        .header-right {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
        }
        .header-icon {
            font-size: 18px;
            margin-left: 15px;
            cursor: pointer;
            color: #1E9FFF;
            transition: all 0.3s;
        }
        .header-icon:hover {
            color: #0d8bdd;
        }
    </style>
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header">
                人才登记管理
                <div class="header-right">
                    <i class="layui-icon layui-icon-search header-icon" id="toggleSearch" title="显示/隐藏搜索"></i>
                    <i class="layui-icon layui-icon-refresh header-icon" id="refreshPage" title="刷新页面"></i>
                </div>
            </div>
            <div class="layui-card-body">
                <!-- 搜索表单 -->
                <form class="layui-form search-form" lay-filter="searchForm" id="searchForm">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">员工编码</label>
                            <div class="layui-input-inline">
                                <input type="text" name="EmployeeCode" class="layui-input" placeholder="请输入员工编码">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">员工姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="EmployeeName" class="layui-input" placeholder="请输入员工姓名">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">学历</label>
                            <div class="layui-input-inline">
                                <select name="EducationBackground">
                                    <option value="">请选择学历</option>
                                    <option value="初中">初中</option>
                                    <option value="高中">高中</option>
                                    <option value="大专">大专</option>
                                    <option value="本科">本科</option>
                                    <option value="硕士">硕士</option>
                                    <option value="博士">博士</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-inline">
                                <select name="Status">
                                    <option value="">请选择状态</option>
                                    <option value="0">备选</option>
                                    <option value="1">入职通过</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="searchBtn">
                                <i class="layui-icon layui-icon-search"></i> 搜索
                            </button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>

                <!-- 数据表格 -->
                <table id="talentTable" lay-filter="talentTable"></table>
                
                <!-- 性别显示模板 -->
                <script type="text/html" id="sexTpl">
                    {{# if(d.sex === 1){ }}
                    <span class="layui-badge layui-bg-blue">男</span>
                    {{# } else if(d.sex === 2){ }}
                    <span class="layui-badge layui-bg-orange">女</span>
                    {{# } else { }}
                    <span class="layui-badge layui-bg-gray">未知</span>
                    {{# } }}
                </script>
                
                <!-- 状态显示模板 -->
                <script type="text/html" id="statusTpl">
                    {{# if(d.status === 1){ }}
                    <span class="layui-badge layui-bg-green">入职通过</span>
                    {{# } else { }}
                    <span class="layui-badge layui-bg-cyan">备选</span>
                    {{# } }}
                </script>
                
                <!-- 婚姻状况模板 -->
                <script type="text/html" id="marriageTpl">
                    {{# if(d.marriage === '已婚'){ }}
                    <span>已婚</span>
                    {{# } else if(d.marriage === '未婚'){ }}
                    <span>未婚</span>
                    {{# } else if(d.marriage === '离婚'){ }}
                    <span>离婚</span>
                    {{# } else { }}
                    <span>未知</span>
                    {{# } }}
                </script>
                
                <!-- 政治面貌模板 -->
                <script type="text/html" id="politicsTpl">
                    <span>{{d.politicsStatus || '群众'}}</span>
                </script>
            </div>
        </div>
    </div>

    <script src="~/layui/layui.js"></script>
    <script>
        layui.use(['table', 'form', 'layer', 'util', 'jquery'], function(){
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var util = layui.util;
            var $ = layui.jquery; // 使用layui内置的jQuery
            
            // 初始化表格
            table.render({
                elem: '#talentTable',
                url: '/TalentRegistration/GetTalentRegistrationList',  // 数据接口
                method: 'post',
                defaultToolbar: ['filter', 'print'],
                page: true,  // 开启分页
                skin: 'line', // 行边框风格
                even: true,  // 开启隔行背景
                size: 'lg',  // 大尺寸
                request: {
                    pageName: 'PageIndex',  // 页码的参数名称
                    limitName: 'PageSize'   // 每页数据量的参数名
                },
                response: {
                    statusName: 'code',     // 数据状态的字段名称
                    statusCode: 0,          // 成功的状态码
                    msgName: 'msg',         // 状态信息的字段名称
                    countName: 'count',     // 数据总数的字段名称
                    dataName: 'data'        // 数据列表的字段名称
                },
                parseData: function(res) {
                    // 处理数据，确保字段名称正确
                    var data = res.data;
                    return {
                        "code": res.code,
                        "msg": res.msg,
                        "count": res.count,
                        "data": data
                    };
                },
                cols: [[
                    {type: 'checkbox', fixed: 'left', width: 50},
                    {field: 'employeeCode', title: '员工编码', width: 120, align: 'center'},
                    {field: 'employeeName', title: '员工姓名', width: 100, align: 'center'},
                    {field: 'phone', title: '联系电话', width: 120, align: 'center'},
                    {field: 'email', title: '电子邮箱', width: 180, align: 'center'},
                    {field: 'sex', title: '用户性别', width: 90, align: 'center', templet: '#sexTpl'},
                    {field: 'educationBackground', title: '学历', width: 90, align: 'center'},
                    {field: 'marriage', title: '婚姻状况', width: 90, align: 'center', templet: '#marriageTpl'},
                    {field: 'politicsStatus', title: '政治面貌', width: 100, align: 'center', templet: '#politicsTpl'},
                    {field: 'status', title: '状态', width: 100, align: 'center', templet: '#statusTpl'},
                    {field: 'birthday', title: '出生年月', width: 120, align: 'center', templet: function(d){
                        if(!d.birthday) return '';
                        return util.toDateString(new Date(d.birthday), 'yyyy-MM-dd');
                    }}
                ]],
                limits: [10, 20, 50, 100],
                limit: 10,
                text: {
                    none: '暂无相关数据'
                }
            });

            // 搜索表单提交
            form.on('submit(searchBtn)', function(data){
                // 重载表格，进行搜索
                table.reload('talentTable', {
                    page: {
                        curr: 1  // 重新从第 1 页开始
                    },
                    where: data.field  // 搜索条件
                });
                return false;
            });
            
            // 显示/隐藏搜索条件
            var searchFormVisible = true;
            $('#toggleSearch').on('click', function() {
                if (searchFormVisible) {
                    $('#searchForm').slideUp();
                    $(this).attr('title', '显示搜索');
                } else {
                    $('#searchForm').slideDown();
                    $(this).attr('title', '隐藏搜索');
                }
                searchFormVisible = !searchFormVisible;
                
                // 重新渲染表格以适应高度变化
                setTimeout(function() {
                    table.resize('talentTable');
                }, 300);
            });
            
            // 刷新页面
            $('#refreshPage').on('click', function() {
                location.reload();
            });
        });
    </script>
</body>
</html>
